<template>
  <div>
    <div class="board-title" style="margin-bottom: 10px">任务列表</div>
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="70px"
    >
      <el-form-item label="时间" prop="workingName">
        <el-date-picker
          v-model="queryParams.time"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          align="right"
          size="small"
          @change="getListPage"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          :default-time="['00:00:00', '00:00:00']"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="任务状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择任务状态"
          clearable
          size="small"
          @change="getListPage"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div>
      <el-table
        :cell-style="{ padding: this.tablePadding }"
        v-loading="loading"
        :data="workingList"
        highlight-current-row
        height="250px"
        border
      >
        <!-- <el-table-column label="任务ID" align="center" prop="workingId" /> -->
        <el-table-column label="任务名称" align="center" prop="workingName" />
        <el-table-column label="设备名称" align="center" prop="equipmentName" /> 
        <el-table-column label="部门" align="center" prop="deptName" />
        <el-table-column label="开始时间" align="center" prop="startTime" width="160"/>
        <el-table-column label="结束时间" align="center" prop="endTime" width="160"/>
        <el-table-column
          label="当前进度"
          align="center"
          prop="status"
          width="100"
        >
         <template slot-scope="scope">
            <el-progress
              :text-inside="true"
              :stroke-width="15"
              :percentage="parseFloat(scope.row.productionStatus)"
            ></el-progress>
          </template>
        </el-table-column>
        <el-table-column
          label="当前层数/总层数"
          align="center"
          prop="status"
          width="120"
        >
          <template slot-scope="scope">
            <div>
              <span
                :style="{
                  color: scope.row.currentLayerFinished > 0 ? '#1890FF' : '',
                }"
                >{{ scope.row.currentLayerFinished }}</span
              >/{{ scope.row.detail }}
            </div>
          </template>
        </el-table-column>
         <el-table-column
          label="预计剩余时间"
          align="center"
          prop="status"
          width="120"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.second }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="任务状态"
          align="center"
          prop="status"
          :formatter="statusFormat"
        />
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        small
        layout="prev, pager, next"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { listWorking } from "@/api/technology/working";
export default {
  props:["statusOptions"],
  data() {
    return {
      workingList: [],
      loading: true,
      total:0,
       pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status:null,
        time: [],
        workingCategoryId: null,
        status: null,
      },
    
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getListPage(){
       this.queryParams.pageNum = 1;
       this.getList()
    },
     toPercent(point) {
      var str = Number(point * 100).toFixed(2);
      // str+="%";
      return str;
    },
    getList() {
      this.loading = true;
      this.queryParams.time==null?this.queryParams.time=[]:''
      if (this.queryParams.time.length > 0) {
        this.queryParams.startTime = this.queryParams.time[0];
        this.queryParams.endTime = this.queryParams.time[1];
      } else {
        this.queryParams.startTime = "";
        this.queryParams.endTime = "";
      }
     
      listWorking(this.queryParams).then((response) => {
        this.workingList = response.rows.map(item=>{
          return {taskStatus:item.status,...item}
        });
        this.workingList.forEach((item) => {
          item.productionStatus = this.toPercent(item.productionStatus);
        });
         this.$parent.setRemainingTime(this.workingList)//时间倒计时
        this.total = response.total;
        this.loading = false;
      });
    },
    // 任务状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.taskStatus);
    },
  },
};
</script>

<style scoped lang="scss">
.txt-active {
}
</style>